<template>
    <div class="displayWritting">
        <el-card class="box-card">
            <div class="header">
                <div>
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-button :disabled="multipleSelection.length == 0" @click="isDelete">删除</el-button>
                </div>
                <div class="right">
                    <div class="inputs">
                        <el-input placeholder="作品名称" v-model="word" />
                        <el-cascader v-model="selectvalue" :options="cateLs" :props="selfCascaderProps"
                            style="margin-left: 10px;" @change="handleChange" />
                    </div>
                    <div>
                        <el-button type="primary" :icon="Search" @click="getList()">查询</el-button>
                        <el-button @click="resetPage" :icon="RefreshRight">重置</el-button>
                    </div>
                </div>
            </div>
            <div class="main">
                <el-table border stripe height="100%" ref="multipleTableRef" :data="tableData" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="封面图" width="120" align="center">
                        <template #default="scope">
                            <div style="margin: 5px;">
                                <el-image :preview-src-list="[scope.row.exhibitImg]"
                                    style=" width: 60px; height: 60px;border-radius: 5px;" :src="scope.row.exhibitImg"
                                    :zoom-rate="1.2" :initial-index="4" fit="cover" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="exhibitName" label="名称" width="180" align="center" class="elipsFont" />
                    <el-table-column property="exhibitClassName" label="所属分类" show-overflow-tooltip align="center" />
                    <el-table-column label="更新时间">
                        <template #default="scope"><span style="color:#767676;font-size: 14px;">{{
                            formatDate(new Date(scope.row.exhibitCreateTime).getTime()) }}</span></template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="250">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="editOne(scope.row.id)">编辑</el-button>
                            <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" :icon="InfoFilled"
                                icon-color="#626AEF" title="确定删除吗？" @confirm="deleteOne(scope.row)">
                                <template #reference>
                                    <el-button link type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer">
                <div></div>
                <el-pagination v-model:current-page="pageform.pnum" v-model:page-size="pageform.psize"
                    :page-sizes="[100, 200, 300, 400]" :small="pageform.small" :disabled="pageform.disabled"
                    :background="pageform.background" layout="prev, pager, next, jumper" :total="pageform.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </el-card>
        <!-- 添加对话框 -->
        <el-dialog v-model="form.adddialogVisible" title="新增" width="50%" :before-close="addhandleClose">
            <div>
                <el-form ref="ruleFormRef" :model="form.addform" :rules="form.rules" label-width="120px"
                    class="demo-ruleForm" :size="formSize" status-icon>
                    <el-form-item label="图片" prop="exhibitImg">
                        <el-upload class="avatar-uploader" :show-file-list="false" action="/dev-api/api/uploadimg/"
                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="form.addform.exhibitImg" :src="form.addform.exhibitImg" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="作品" prop="exhibitName">
                        <el-input v-model="form.addform.exhibitName" />
                    </el-form-item>
                    <el-form-item label="作品类型" prop="exhibitClassId_id">
                        <el-cascader v-model="form.addform.exhibitClassId_id" :options="cateLs" @change="addhandleChange"
                            :props="selfCascaderProps" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="form.adddialogVisible = false">
                            取消
                        </el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                            保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <!-- 是否批量删除对话框-->
        <el-dialog v-model="form.delallDialogvisible" title="删除" width="30%" center>
            <span>
                您确定要删除这些数据吗？
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="form.delallDialogvisible = false">取消</el-button>
                    <el-button type="primary" @click="allDelete()">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑对话框 -->
        <el-dialog v-model="form.editDialogVisible" title="编辑" width="50%" :before-close="addhandleClose">
            <div>
                <el-form ref="ruleFormRef" :model="form.editform" :rules="form.rules" label-width="120px"
                    class="demo-ruleForm" :size="formSize" status-icon>
                    <el-form-item label="图片" prop="exhibitImg">
                        <el-upload class="avatar-uploader" :show-file-list="false" action="/dev-api/api/uploadimg/"
                            :on-success="edithandleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="form.editform.exhibitImg" :src="form.editform.exhibitImg" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="作品" prop="exhibitName">
                        <el-input v-model="form.editform.exhibitName" />
                    </el-form-item>
                    <el-form-item label="作品类型" prop="exhibitClassId_id">
                        <el-cascader v-model="form.editform.exhibitClassId_id" :options="cateLs" @change="handleEditChange"
                            :props="selfCascaderProps" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="form.editDialogVisible = false">
                            取消
                        </el-button>
                        <el-button type="primary" @click="submitFormEdit(ruleFormRef)">
                            保存
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import '../stoneInscription/assets/global.css'
import { ref } from 'vue'
import { ElTable, FormInstance, UploadProps } from 'element-plus'
import { Search, RefreshRight, Plus, InfoFilled } from '@element-plus/icons-vue'
import request from '../../utils/request'
import timeobj from '../stoneInscription/formatTime'
let { formatDate, formatSeconds } = timeobj//取出方法
let word = ref("")//模糊关键字
let selectvalue = ref("")//下拉框
const tableData = ref<StoneInscription[]>([])
const cateLs = ref([])//分类名称列表
interface StoneInscription {
    fengmian: string
    exhibitName: string
    exhibitClassName: string
    exhibitCreateTime: string
    exhibitClassId: number
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<StoneInscription[]>([])
const handleSelectionChange = (val: StoneInscription[]) => {
    multipleSelection.value = val
}
// 获取数据列表
let getList = async () => {
    let data: any = await request.get(`/api/exhibit/exhibitAddShowDel/?size=${pageform.psize}&page=${pageform.pnum}&exhibitClassId_id=${selectvalue.value}&keyword=${word.value}`)
    tableData.value = [...data.data]
    pageform.total = data.total
}
// 自定义级联选择器的配置项
let selfCascaderProps =
{
    value: "id",
    label: "name",
    children: "children",
    emitPath: false,
    checkStrictly: true,
}
// 表单校验ref
const ruleFormRef = ref<FormInstance>()
const formSize = ref('default')
// 表单配置
let form:any = reactive({
    adddialogVisible: false,
    delallDialogvisible: false,
    editDialogVisible: false,
    addform: { exhibitName: "", exhibitImg: "", exhibitClassId_id: "" },
    editform: {
        id: "",
        exhibitName: "",
        exhibitImg: "",
        exhibitClassId_id: "",
    },
    rules: {
        exhibitName: [
            { required: true, message: '请输入作品名称', trigger: 'blur' },
            { min: 3, max: 25, message: '长度是3-25', trigger: 'blur' },
        ],
        exhibitImg: [
            { required: true, message: '请上传图片信息', trigger: 'blur' },
        ],
        exhibitClassId_id: [
            {
                required: true,
                message: '请选择作品类型',
                trigger: 'change',
            },
        ],
    }
})
// 获取分类列表
let getCatels = async () => {
    let { data } = await request.get(`/api/classify/classfiy/`)
    cateLs.value = data
}
// 添加关闭对话框
let addhandleClose = () => { form.adddialogVisible = false, form.editDialogVisible = false }
let add = () => { form.adddialogVisible = true }
//分页选项
let pageform = reactive({
    psize: 10,
    pnum: 1,
    small: true,
    background: true,
    disabled: false,
    total: 0
})
//分页监听函数
let handleSizeChange = (val: number) => {
    pageform.psize=val
    getList()
}
//分页监听函数
let handleCurrentChange = (val: number) => {
    pageform.pnum=val
    getList()
}
//添加中的 级联选择器
const addhandleChange = (value: any) => {
    form.addform.type = value
}
// 选中查询
const handleChange = (value: any) => {
    selectvalue.value = value
}
const handleEditChange = (value: any) => {
    form.editform.exhibitClassId_id = value
}
//文件上传的函数
const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.addform.exhibitImg = response.path
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
const edithandleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    form.editform.exhibitImg = response.path
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
// 文件上传前生命钩子函数
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('图像须为.jpg格式')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图像大小不要超过5mb')
        return false
    }
    return true
}
// 添加确定
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let data: any = await request.post(`/api/exhibit/exhibitAddShowDel/`, {
                exhibitName: form.addform.exhibitName,
                exhibitImg: form.addform.exhibitImg,
                is_delete: 0,
                exhibitClassId_id:form.addform.exhibitClassId_id
            })
            ElMessage.info(data.msg)
            getList()
            form.addform={}
            form.adddialogVisible = false
        } else {
            ElMessage.error("请完善创建作品信息")
        }
    })
}
onMounted(() => {
    getCatels()
    getList()
})
// 重置页面操作
let resetPage = () => {
    getList()
    word.value = ""
    selectvalue.value = ""
}
//全部删除功能
let isDelete = async () => {
    form.delallDialogvisible = true
}
// 全部删除确定
let allDelete = async () => {
    let val = []
    for (const item of multipleSelection.value) {
        val.push(item.id)
    }
    let data = await request.post(`/api/exhibit/exhibitDelAll/`, {
        idList: val
    })
    ElMessage.info(data.msg)
    getList()
    form.delallDialogvisible = false;
}
// 单个删除确定
let deleteOne = async (row: any) => {
    let data: any = await request.delete(`/api/exhibit/exhibitAddShowDel/?id=${row.id}`)
    form.delallDialogvisible = false,
        getList()
    return ElMessage.info(data.msg)
}
// 单个编辑打开
let editOne = async (id: any) => {
    form.editDialogVisible = true
    let { data } = await request.get(`/api/exhibit/exhibitEdit/?id=${id}`)
    form.editform = data
    form.editform.exhibitClassId_id = data.exhibitClassMsg.id
}
// 编辑确认
const submitFormEdit = async (formEl: FormInstance | undefined) => {
    let data: any = await request.post(`/api/exhibit/exhibitEdit/`, form.editform)
    ElMessage.info(data.msg)
    getList()
    form.editDialogVisible = false
}
</script>
<style lang="scss" scoped>
.displayWritting {
    width: 100%;
    height: 100%;
    min-width: 950px;
}
:deep(.el-table__row) {
    text-align: center !important;
    color: #737373;
    font-size: 15px;
}
// 表头行高背景
:deep(.el-table__header) {
    line-height: 50px;
    background-color: #f2f2f2;
    border: 1px solid #eaeaea;
    font-size: 15px;
    font-weight: 500;
}
// 表项border
:deep(.el-table__row) {
    border: 1px solid #eaeaea;
    border-collapse: collapse;
}
// 表项 斑马色
:deep(.el-table__row:nth-child(even)) {
    background-color: #f5f5f5;
}
.elipsFont {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
<!-- // 上传文件样式 -->
<style>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}8
.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>